<template>
	<div class="heightMax publicbox" v-loading='tableLoading'>
		<div class="header">
			<div class="listName">
				<i></i><span class="font14">厂商信息</span>
			</div>
			<div>
				<el-button type="primary" size="mini" @click="enture('form')" v-loading='btnLoading' v-if="!isDisabled">保存</el-button>
				<el-button size="mini" @click='backRouter'>返回</el-button>
			</div>
		</div>
		<vueScroll>
			<div class="content">
				<el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth" style='margin-top: 25px;height: 100%;'
				 size="mini">
					<el-row :gutter="20">
						<el-col :span="6" :offset='1'>
							<el-form-item label="平台名称:" prop="platformName">
								<el-input size="mini" v-model.trim="form.platformName" placeholder="请输入平台名称" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="平台鉴权码:" prop="authenticationCode">
								<el-input size="mini" v-model.trim="form.authenticationCode" placeholder="请输入平台鉴权码" autocomplete="off"
								 clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="平台唯一识别ID:" prop="discernId">
								<el-input size="mini" v-model.trim="form.discernId" placeholder="请输入平台唯一识别ID" autocomplete="off" clearable
								 :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6" :offset='1'>
							<el-form-item label="允许接入标志:" prop="mark">
								<el-select v-model="form.mark" placeholder="请选择允许接入标志" size="mini" clearable :disabled='isDisabled'>
									<el-option v-for="(item,index) in markArr" :label="item.label" :value="item.value" :key='index'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="平台IP或域名:" prop="domainName">
								<el-input size="mini" v-model.trim="form.domainName" placeholder="请输入平台IP或域名" autocomplete="off" clearable
								 :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" :offset='1'>
							<el-form-item label="平台服务端口:" prop="serverSide">
								<el-input size="mini" v-model.trim="form.serverSide" placeholder="请输入平台服务端口" autocomplete="off" clearable
								 :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6" :offset='1'>
							<el-form-item label="平台web应用名:">
								<el-input size="mini" v-model.trim="form.webName" placeholder="请输入平台web应用名" autocomplete="off" clearable
								 :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="13" :offset='1'>
							<el-form-item label="接入厂商列表:" prop="firm">
								<el-select filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loadingSelected" v-model="form.firm"
								 multiple size="mini" clearable :disabled='isDisabled' @change="changeFirmList">
									<el-option v-for="(item) in firmArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="20" :offset='1'>
							<el-form-item label="备注:">
								<el-input rows='7' type="textarea" resize='none' size="mini" v-model.trim="form.des" placeholder="请输入备注"
								 autocomplete="off" clearable :disabled='isDisabled'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</vueScroll>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
		axiosChange
	} from "@/common.js";
	import {
		platformName,
		authenticationCode,
		discernId,
		mark,
		domainName,
		serverSide,
		firm,
		firmName,
		firmCode
	} from './rules.js'
	export default {
		mounted() {
			if (this.typeNow) {
				this.getComplieList()
			} else {
				this.getFirmNameList()
			}
		},
		props: {
			typeNow: Number,
			default () {
				return 0 //0是新增 1是编辑 2是查看
			}
		},
		data() {
			return {
				tableLoading: false,
				btnLoading: false,
				dialogVisible: false,
				loadingSelected: false,
				formLabelWidth: '130px',
				formLabelWidth1: '90px',
				firmArr: [],
				markArr: [{
					value: 0,
					label: '不允许'
				}, {
					value: 1,
					label: '允许'
				}],
				form: {
					platformName: '',
					authenticationCode: '',
					discernId: '',
					mark: '',
					domainName: '',
					serverSide: '',
					webName: '',
					firm: [],
					des: ''
				},
				rules: {
					platformName,
					authenticationCode,
					discernId,
					mark,
					domainName,
					serverSide,
					firm,
					firmName,
					firmCode
				}
			}
		},
		computed: {
			isDisabled() {
				if (this.typeNow == 2) {
					return true
				} else {
					return false
				}
			},
			AccessManufacturerId() {
				if (localStorage.AccessManufacturerId) {
					return JSON.parse(localStorage.AccessManufacturerId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			//获取编辑数据
			getComplieList() {
				let url = '/manu/platform/' + this.AccessManufacturerId + '/'
				this.tableLoading = true
				axiosGet(url, {}, (res) => {
					this.tableLoading = false
					if (res.code == 0) {
						this.form.platformName = res.detail.name
						this.form.webName = res.detail.web_name
						this.form.authenticationCode = res.detail.code
						this.form.mark = Number(res.detail.can_access)
						this.form.domainName = res.detail.domain
						this.form.serverSide = res.detail.port
						this.form.discernId = res.detail.unique_id
						this.form.firm = res.detail.manufacturers.map((item) => {
							return item.id
						})
						this.firmArr = res.detail.manufacturers
						this.form.des = res.detail.desc
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			changeFirmList(res) {
				if (!res) {
					this.getFirmNameList()
				}
			},
			//制造单位
			getFirmNameList(query = '') {
				let params = {
					page: 1,
					page_size_count: 10,
					key_words: query
				}
				this.loadingSelected = true
				axiosGet('/manu/platform/manufacturer/', params, (res) => {
					this.loadingSelected = false
					if (res.code == 0) {
						this.firmArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			remoteMethod(query) {
				this.getFirmNameList(query)
			},
			//返回上一级
			backRouter() {
				let obj = {
					name: '平台接入控制',
					router: '/MainView/BusinessConfiguration/AccessManufacturer'
				}
				this.$store.commit('GOTAGROUTER', obj)
			},
			//提交
			enture(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let url = ''
						let method = ''
						let data = {
							name: this.form.platformName,
							web_name: this.form.webName,
							code: this.form.authenticationCode,
							can_access: this.form.mark,
							domain: this.form.domainName,
							port: this.form.serverSide,
							unique_id: this.form.discernId,
							manus: this.form.firm,
							desc: this.form.des
						}
						if (this.typeNow) {
							url = '/manu/platform/' + this.AccessManufacturerId + '/'
							method = 'put'
						} else {
							url = '/manu/platform/'
							method = 'post'
						}
						this.btnLoading = true
						axiosChange(url, method, data, (res) => {
							this.btnLoading = false
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
								this.backRouter()
								localStorage.RoleManagementFlush = JSON.stringify({
									id: 1
								})
							} else {
								this.$message.error(res.detail.result)
							}
						})
					}
				})
			},
			//dialog确定
			handleEnsure() {
				this.$refs['formTwo'].validate((valid) => {
					if (valid) {
						this.handleClose()
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.header {
		display: flex;
		justify-content: space-between;
	}

	.content {
		height: 90%;
		width: 100%;
		margin-top: 5px;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}

	}

	.el-row {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}
</style>
